<template>
  <div class="cus-modal" v-if="popup" @touchmove.stop.prevent="moveStop">
    <div class="master-hit-box">
      <div class="master-hit-close">
        <img class="close-btn" src="./img/close.png" @click="close" />
      </div>
      <view class="ad-box">
        <view class="swiper-content">
          <swiper
            class="swiper-box"
            circular
            :indicator-dots="indicatorDots"
            :autoplay="autoplay"
            :interval="interval"
            :duration="duration"
          >
            <swiper-item
              v-for="(item, index) in itemList"
              :key="index"
              class="swiper-item"
            >
              <view class="swiper-item-box" @click="itemTarget(item)">
                <image
                  class="swiper-img"
                  mode="heightFix"
                  :src="item.imageLinks"
                  @click="EventTarget(item)"
                />
              </view>
            </swiper-item>
          </swiper>
        </view>
      </view>
    </div>
  </div>
</template>

<script>
import { getMallListApi } from "@/http/api";
export default {
  name: "activity-pop",
  data() {
    return {
      popup: false,
      itemList: {},
      indicatorDots: true,
      autoplay: true,
      interval: 2500,
      duration: 1000,
    };
  },
  mounted() {
    // 非弹窗时间段18:00-22:00
    let hour = new Date().getHours();
    if (hour > 18 && hour < 22) return;
    // 获取ad信息
    getMallListApi({
      pageNum: 1,
      pageSize: 999,
      status: 1,
      projectId: 97,
      adPosition: 1,
    }).then((res) => {
      if (res.code == 200 && res.rows.length > 0) {
        this.itemList = res.rows;
        this.popup = true;
      } else {
        this.popup = false;
      }
    });
  },
  methods: {
    moveStop() {},
    open() {
      this.hasOpen = true;
      if (this.hasResult) this.popup = true;
    },
    close(e) {
      this.popup = false;
    },
    EventTarget(item) {
      if (item.skipLinks && item.skipLinks != "") {
        window.location.href = item.skipLinks;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.cus-modal {
  background-color: rgba(0, 0, 0, 0.6);
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  max-width: 750px;
  z-index: 10000;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  left: var(--window-left);
}

.master-hit-box {
  width: 90%;
  max-width: 414px;
  margin: auto;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.master-hit-close {
  align-self: flex-end;
}

.close-btn {
  width: 82rpx;
}

.swiper-content {
  width: 690rpx;
  border-radius: 30rpx;
  .swiper-box {
    height: 797rpx;
    /*      ::v-deep .uni-swiper-slide-frame {
          height: fit-content!important;
        }
        ::v-deep .swiper-item {
          font-size: 20rpx;
          height: fit-content!important;
        }   */
  }
}
.swiper-item-box {
  display: flex;
  justify-content: center;
}
.swiper-img {
  width: 642rpx;
  height: 797rpx;
}
</style>
